<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
    <script src="page.js"></script>
    <script src="../../js/axios.min.js"></script>
</head>
<body>
<div id="a">
    <table>
<!--        展示分页数据-->
        <tr>
            <th>编号</th><th>标题</th><th>时间</th><th>内容</th>
        </tr>
        <tr v-for=" row in result.data">
            <td>{{row.id}}</td>
            <td>{{row.title}}</td>
            <td>{{row.intime}}</td>
            <td>
                <div style="max-width: 200px; max-height: 20px; overflow: hidden">
                    {{row.content}}
                </div>
            </td>
        </tr>

    </table>
    <el-pagination ref="p" @page-change="query"
            background page-size="10"
            current-page="1"
            :total="result.total"
            layout="first, prev, pager, last, next">
    </el-pagination>
</div>
<script>
    var v = new Vue({
        el : "#a",
        data : {
            result : {}
        },
        created(){
            axios.get(`../../QueryNewsServlet?currentPage=1&pageSize=10`).then( res=>{
                // res 就是后台返回的数据 但是
                // res.data ==>{ data, total}
                this.result = res.data;
                console.info(this.result);
            });
        },
        methods:{
            query(currPage) {
                axios.get(`../../QueryNewsServlet`,{
                    params: {
                        currentPage : currPage,
                        pageSize : this.$refs.p.pageSize
                    }
                }).then( res=>{
                    // res 就是后台返回的数据 但是
                    // res.data ==>{ data, total}
                    this.result = res.data;
                });
            }
        }
    })
</script>
</body>
</html>